<template>
  <view class="detail-view">
    <view class="top-view clearfix">
      <view class="float_left">
        <text v-if="bill_detail.auditStatus === 2" class="status-text"
          >已审核</text
        >
        <text v-else class="status-text">未审核</text>
      </view>
    </view>
    <view class="detail-cont">
      <view class="info-li clearfix">
        <view class="label">单据编号</view>
        <view class="value" @click="copy(bill_detail.no)">
          <u-icon
            margin-right="20"
            label-pos="left"
            :label="bill_detail.no"
            name="copy"
            custom-prefix="custom-icon"
            size="24"
          ></u-icon>
        </view>
      </view>
      <view class="info-li clearfix">
        <view class="label">入库类型</view>
        <view class="value">{{ bill_detail.typeName }}</view>
      </view>
      <view class="info-li clearfix">
        <view class="label">仓库</view>
        <view class="value">{{ bill_detail.warehouseName }}</view>
      </view>
      <view class="info-li clearfix">
        <view class="label">制单人</view>
        <view class="value">{{ bill_detail.operatorName }}</view>
      </view>
      <view class="info-li clearfix">
        <view class="label">制单时间</view>
        <view class="value">{{
          $u.timeFormat(bill_detail.createTime, "yyyy-mm-dd hh:MM:ss")
        }}</view>
      </view>
      <view class="info-li clearfix" v-if="bill_detail.auditStatus === 2">
        <view class="label">审核人</view>
        <view class="value">{{ bill_detail.auditName }}</view>
      </view>
      <view class="info-li clearfix" v-if="bill_detail.auditStatus === 2">
        <view class="label">入库时间</view>
        <view class="value">{{
          $u.timeFormat(bill_detail.auditTime, "yyyy-mm-dd hh:MM:ss")
        }}</view>
      </view>
      <view class="goods-title">商品清单</view>
      <view class="goods-ul">
        <view
          class="goods-li"
          v-for="(item, index) in bill_detail.details"
          :key="index"
        >
          <view class="clearfix">
            <view class="goods-img float_left">
              <image
                :src="
                  item.images && item.images.length
                    ? item.images[0]
                    : '../../static/img/goods.png'
                "
                mode="aspectFill"
              ></image>
            </view>
            <view class="float_left info">
              <view class="goods-name ellipsis">{{ item.materielName }}</view>
              <view class="goods-code">{{ item.materielCode }}</view>
              <view class="goods-num clearfix">
                <view class="float_left"
                  >{{ item.unitName }};{{ item.skuName }}</view
                >
                <text class="float_right"
                  >x{{ $utils.formatNub(item.num) }}{{ item.unitName }}</text
                >
              </view>
            </view>
          </view>
          <view class="num-ul">
            <view class="num-li">
              <view class="label">入库</view>
              <view class="value">
                <input
                  v-if="bill_detail.auditStatus === 1"
                  type="digit"
                  v-model="item.inNum"
                />
                <text v-else>{{ $utils.formatNub(item.inNum) }}</text>
              </view>
            </view>
            <view v-if="item.isEq === 5" class="num-li">
              <view class="label">其他单位</view>
              <view class="value">
                <input
                  v-if="bill_detail.auditStatus === 1"
                  type="digit"
                  v-model="item.otherNum"
                />
                <text v-else>{{ $utils.formatNub(item.otherNum) }}</text>
              </view>
            </view>
            <view v-if="shelfLifeSetUp === 5" class="num-li">
              <view class="label">生产日期</view>
              <view class="value"
                ><input
                  disabled
                  @click="openTime(index)"
                  :value="$u.timeFormat(item.productionData)"
              /></view>
            </view>
            <view v-if="enableLocationManagement === 5" class="num-li">
              <view class="label">库位</view>
              <view class="value">
                <input
                  @click="selLocation(index)"
                  disabled
                  :placeholder="
                    bill_detail.auditStatus === 2 ? '未设置' : '请选择'
                  "
                  placeholder-class="input-pl"
                  v-model="item.storageLocationName"
                />
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="remark-li">
        <view class="label">备注</view>
        <view class="remark">
          <u-input
            v-if="bill_detail.auditStatus === 1"
            v-model="bill_detail.remark"
            type="textarea"
            border
          />
          <text v-else>{{ bill_detail.remark || "无" }}</text>
        </view>
      </view>
    </view>
    <u-picker v-model="time_show" @confirm="timeConfirm" mode="time"></u-picker>
    <view
      v-if="
        $accessCheck($Access.InventoryInUpdateInventoryInStatus) &&
        bill_detail.auditStatus !== 2
      "
      class="detail-bottom"
    >
      <view
        class="handel-btn"
        @click="openModel('确定要审核通过该订单吗？', '审核')"
        >审核</view
      >
    </view>
    <u-modal
      v-model="model_show"
      :show-cancel-button="true"
      :content="model_content"
      @confirm="modelConfirm"
      @cancel="modelCancel"
    ></u-modal>
  </view>
</template>

<script>
export default {
  data() {
    return {
      time_show: false,
      model_tag: "",
      model_show: false,
      model_content: "",
      bill_id: 0,
      bill_detail: {},
      goods_index: 0,
      warehouseLocation: "",
    };
  },
  onPullDownRefresh() {
    this.getInventoryInInfo();
  },
  computed: {
    userInfo() {
      return this.$store.state.userInfo;
    },
    shelfLifeSetUp() {
      return parseInt(this.$store.state.basicSet.shelfLifeSetUp);
    },
    enableLocationManagement() {
      return parseInt(this.$store.state.basicSet.enableLocationManagement);
    },
  },
  watch: {
    warehouseLocation(val) {
      if (val) {
        const target = this.$u.deepClone(this.bill_detail);
        target.details[this.goods_index] = {
          ...target.details[this.goods_index],
          areaId: val.areaId,
          areaName: val.areaName,
          areaCode: val.areaCode,
          storageLocationId: val.id,
          storageLocationName: val.name,
          storageLocationCode: val.code,
        };
        this.bill_detail = target;
      }
    },
  },
  onLoad(options) {
    this.bill_id = options.id;
    this.getInventoryInInfo();
  },
  methods: {
    // 去选择库区库位页面
    selLocation(index) {
      if (this.bill_detail.auditStatus === 2) {
        return;
      }
      this.goods_index = index;
      this.goPage("/pagesT/stock/WarehouseRegion");
    },
    // 详情
    getInventoryInInfo() {
      this.$u.api
        .getInventoryInInfo(this.bill_id)
        .then((res) => {
          uni.stopPullDownRefresh();
          this.bill_detail = {
            ...res.data,
            details: res.data.details.map((item) => {
              return {
                ...item,
                inNum: item.inNum ? Number(item.inNum) : Number(item.num),
                otherNum: Number(item.otherNum) || 0,
                productionData:
                  item.productionData || parseInt(new Date().getTime() / 1000),
                areaId: item.areaId || "",
                areaName: item.areaName || "",
                areaCode: item.areaCode || "",
                storageLocationId: item.storageLocationId || "",
                storageLocationName: item.storageLocationName || "",
                storageLocationCode: item.storageLocationCode || "",
              };
            }),
          };
        })
        .catch((err) => {
          uni.stopPullDownRefresh();
        });
    },
    openTime(index) {
      this.time_show = true;
      this.goods_index = index;
    },
    timeConfirm(obj) {
      const target = this.$u.deepClone(this.bill_detail);
      target.details[this.goods_index].productionData = obj.timestamp;
      this.bill_detail = target;
    },
    // 打开提示框
    openModel(content, tag) {
      this.model_content = content;
      this.model_show = true;
      this.model_tag = tag;
    },
    // 审核
    modelConfirm() {
      switch (this.model_tag) {
        case "审核":
          this.updateInventoryInStatus();
          break;
      }
    },
    modelCancel() {},

    // 审核订单
    updateInventoryInStatus() {
      // 开启保质期设置，进行保质期验证
      if (this.shelfLifeSetUp === 5) {
        let gindex = 0;
        let gdate = false;
        for (let i in this.bill_detail.details) {
          let item = this.bill_detail.details[i];
          if (!item.productionData) {
            gindex = i;
            gdate = true;
            break;
          }
        }
        if (gdate) {
          this.$u.toast(`请选择第${Number(gindex) + 1}行的生产日期`);
          return;
        }
      }
      let details = this.bill_detail.details.map((item) => {
        let obj = {
          ...item,
          inNum: Number(item.inNum),
          otherNum: Number(item.otherNum),
          inCost: item.unitPrice,
          inCostTotal: item.totalPrice,
        };
        // // 开启保质期设置，进行保质期验证
        // if (this.shelfLifeSetUp === 5) {
        // 	obj.productionData = parseInt(item.productionData / 1000);
        // }
        return obj;
      });
      let params = {
        id: this.bill_id,
        auditName: this.userInfo.name || "",
        remark: this.bill_detail.remark,
        details: details,
        costAllocation: 0,
        costAllocationType: "",
      };
      this.$u.api.updateInventoryInStatus(params).then((res) => {
        this.$u.toast("审核成功");
        this.getInventoryInInfo();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.detail-view {
  padding-bottom: 100rpx;
}
.top-view {
  background-color: $uni-color-primary;
  height: 200rpx;
  padding: 0 30rpx;
  color: #ffffff;
  font-size: 40rpx;
  line-height: 100rpx;
  .status-text {
    margin-right: 10rpx;
  }
  .float_right {
    font-size: 28rpx;
  }
}
.detail-cont {
  width: 710rpx;
  margin: 0 auto;
  background-color: #ffffff;
  border-radius: 20rpx;
  padding: 20rpx 0;
  overflow: hidden;
  transform: translateY(-80rpx);
  .info-li {
    padding: 0 30rpx;
    line-height: 80rpx;
    .label {
      float: left;
      color: #6c6c6c;
    }
    .value {
      float: right;
    }
    .money-label {
      font-weight: bold;
    }
    .money-value {
      font-weight: bold;
      font-size: 30rpx;
    }
  }
  .remark-li {
    padding: 0 30rpx;
    .label {
      color: #6c6c6c;
      line-height: 60rpx;
    }
  }
  .b-b {
    border-bottom: 1px solid #eeeeee;
  }
  .goods-title {
    background-color: #fb5904;
    line-height: 72rpx;
    width: 644rpx;
    margin: 30rpx auto 0;
    color: #ffffff;
    border-top-left-radius: 20rpx;
    border-top-right-radius: 20rpx;
    padding: 0 24rpx;
    position: relative;
    z-index: 1;
  }
  .goods-ul {
    padding: 0 30rpx 30rpx;
    box-shadow: 0px -3px 12rpx 0px #e4eaf5;
    border-bottom: 1px solid #eeeeee;

    .goods-li {
      padding-top: 24rpx;
      .goods-img {
        margin-right: 20rpx;
        image {
          width: 150rpx;
          height: 150rpx;
          border-radius: 8rpx;
          display: block;
          background-color: #f5f5f5;
        }
      }
      .info {
        .goods-name {
          width: 470rpx;
          height: 34rpx;
          line-height: 34rpx;
        }
        .goods-code {
          font-size: 24rpx;
          padding-top: 10rpx;
        }
        .goods-num {
          padding-top: 10rpx;
          font-size: 24rpx;
          .price {
            font-size: 28rpx;
            font-weight: bold;
            color: $uni-color-error;
          }
        }
      }
      .num-ul {
        display: flex;
        font-size: 24rpx;
        padding-top: 10rpx;
        .num-li {
          flex: 4;
          border-right: 1px solid #ecf0f7;
          text-align: center;
          padding: 0 10rpx;
          &:last-child {
            border-right: 0 none;
          }
          .label {
            color: #879bba;
          }
          .value {
            height: 40rpx;
            line-height: 40rpx;
            border-bottom: 1px solid $uni-color-primary;
            input {
              font-size: 24rpx;
              height: 40rpx;
              line-height: 40rpx;
            }
          }
        }
      }
    }
  }
}
.handel-btn {
  background-color: #fb5904 !important;
  border-color: #fb5904 !important;
}
</style>
